<!-- TABLE -->
<div class="table" style="table-layout: fixed;margin-top: 20px;">
    <div class="table-row">
        <!-- Company Name -->
        <div class="table-head width_110 center-align">
            <a href="javascript:;" class="sortable_placeholder" (click)="setOrderByCol('CompanyName');" [ngClass]="orderByCol === 'CompanyName' ? (orderByAsc ? 'sortable_up' : 'sortable_down') : null">Company Name</a>
            <div class="table-search-container">
                <input type="text" class="search-inp table-search" [value]="compFilters.companyName" (input)="compFilters.companyName = $event.target.value" (keyup.enter)="searchButtonClick()">
                <input type="button" value="" (click)="searchButtonClick()" class="search-btn">
            </div>
        </div>     
        <!-- Exchange -->   
        <div class="table-head width_60 center-align">
            <div>
                <a href="javascript:;" class="sortable_placeholder" (click)="setOrderByCol('Exchange');" [ngClass]="orderByCol === 'Exchange' ? (orderByAsc ? 'sortable_up' : 'sortable_down') : null">Exchange</a>
            </div>
            <br />
            <br />
        </div>
        <!-- Ticker -->
        <div class="table-head width_60 center-align">
            <div>
                <a href="javascript:;" class="sortable_placeholder" (click)="setOrderByCol('Ticker');" [ngClass]="orderByCol === 'Ticker' ? (orderByAsc ? 'sortable_up' : 'sortable_down') : null">Ticker</a>
            </div>
            <br />
            <br />
        </div>
        <!-- Assessment -->
        <div class="table-head width_110 center-align">
            <div>
                <a href="javascript:;" class="sortable_placeholder" (click)="setOrderByCol('Assessment');" [ngClass]="orderByCol === 'Assessment' ? (orderByAsc ? 'sortable_up' : 'sortable_down') : null">ESG Risk Category</a>
            </div>
            <ss-multiselect-dropdown [settings]="dropdownSettings" [options]="riskClusters" [(ngModel)]="compFilters.assessments" (dropdownClosed)="onDropdownClosed($event)"></ss-multiselect-dropdown>
            <br />
        </div>
        <!-- SubIndustry -->
         <div class="table-head width_110 center-align" style="position:relative;">
            <a href="javascript:;" class="sortable_placeholder" (click)="setOrderByCol('SubPeerGroup');" [ngClass]="orderByCol === 'SubPeerGroup' ? (orderByAsc ? 'sortable_up' : 'sortable_down') : null">SubIndustry</a>
            <div class="table-search-container">
                <input type="text" class="search-inp table-search" [value]="compFilters.subPeerGroup" (input)="compFilters.subPeerGroup = $event.target.value" (keyup.enter)="searchButtonClick()">
                <input type="button" value="" (click)="searchButtonClick()" class="search-btn">
            </div>
        </div>
        <!-- Last Update -->
        <div class="table-head width_60 center-align">
            <div>
                <a href="javascript:;" class="sortable_placeholder" (click)="setOrderByCol('LastUpdate');" [ngClass]="orderByCol === 'LastUpdate' ? (orderByAsc ? 'sortable_up' : 'sortable_down') : null">Last Update</a>
            </div>
            <br />
            <br />
        </div>      
    </div>
    <div *ngFor="let company of companies;let i = index;let last = last" [ngClass]="i % 2==1 ? 'table-row odd': 'table-row'">
        <div class="table-cell width_110" [ngClass]="{'last':last}" style="width: 180px; border-left: 1px solid #e0e0e0;">
            <a *ngIf="company.companyName && company.isEnabled" target="_parent" href="{{this.containerUrl}}/#/research/riskratings/{{getCompanyUrlFriendlyName(company)}}" style="width: 150px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="{{company.companyName}}">{{company.companyName}}</a>
            <div *ngIf="company.companyName && !company.isEnabled" style="width: 150px; display: block; font-weight:500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="{{company.companyName}}">{{company.companyName}}</div>
            <p *ngIf="!company.companyName">N/A</p>
        </div>
        <div class="table-cell width_60 center-align" [ngClass]="{'last':last}">
            {{company.exchange}}
        </div>
        <div class="table-cell width_60 center-align" [ngClass]="{'last':last}">
            {{company.ticker}}
        </div>
        <div class="table-cell width_130" [ngClass]="{'last':last}">
            {{company.assessment}}
        </div>
        <div class="table-cell width_130" [ngClass]="{'last':last}">
            {{company.subPeerGroup}}
        </div>
        <div class="table-cell width_60 center-align" [ngClass]="{'last':last}">
            {{company.lastUpdate | date: 'dd MMM yyyy'}}
        </div>
    </div>
</div>

<!-- PAGINATION -->
<sustainalytics-pagination #pagination (changed)="pageChanged($event)" [elemCount]="companyCount"></sustainalytics-pagination>